<template>
    <div id="app">
        <Index :data="flowData" />
    </div>
</template>

<script>
import Index from './Index.vue';
import EnumUtils from './utils/enumUtils.js';
import Req from '@/services/req.js';

export default {
    name: 'App',
    components: {
        Index
    },
    data() {
        return {
            flowData: {}, // 原始数据处理过的，画布中绘制的需要的数据
            flowInfoData: {} // 后端返回的原始数据
        };
    },
    mounted() {
        this.getFlowInfo();
    },
    methods: {
        async getFlowInfo() {
            const { status, result } = await Req.get('/data/getFlowInfo.json');
            if (status.statusCode === 0) {
                this.flowInfoData = result;
                // 处理图形数据，将后端返回的数据处理成图形可以处理的数据
                let nodes = [];
                // 剔除掉作业点的点位列表
                let componentsArr = this.flowInfoData.components ?? [];
                let componentsLsit = componentsArr.filter(item => {
                    return item.componentCode !== EnumUtils.operatingPoint;
                });
                for (let item of componentsLsit) {
                    let graphicObj = item.graphicVO || {};
                    item.graphicVO = null; //置空graphicVO，去掉object无限引用
                    graphicObj.data = item; // 保存到data属性上
                    graphicObj.id = graphicObj.id || '';
                    graphicObj.type = 'rect-node';
                    graphicObj.label = item.componentName;
                    // 使用上传的图标
                    if (item.componentIcon) {
                        graphicObj.logoIcon = {
                            show: true,
                            img: item.componentIcon,
                            iconStyle: {
                                width: 18,
                                height: 18,
                                left: 8,
                                top: 8
                            }
                        };
                    }
                    nodes.push(graphicObj);
                }
                // 数据集合
                this.flowData = {
                    nodes,
                    edges: this.flowInfoData.routes || []
                };
                console.log('flowData', this.flowData);
                // 如果没有绘制节点, 则默认把开始和结束节点绘制到画布上
                this.$bus.emit('drawDefaultNodeEvent', nodes.length === 0);
            } else {
                this.$message.error(status.statusReason);
            }
        }
    }
};
</script>

<style>
#app {
    width: 100%;
    height: 100%;
}
</style>
